<template>
    <div class="sectionType">
        <!-- <el-form ref="form" :model="formSearch" label-width="80px" :inline="true" style="margin-top:10px;">
            <el-form-item label="设备类型">
                <el-select v-model="formSearch.devType" placeholder="请选择类型" size="small">
                    <el-option label="公区报警" value="1"></el-option>
                    <el-option label="室内报警" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" @click="cleanObj,upOrAdd=1,dialogTableVisible=true">新增对照表</el-button>
                <el-button size="small" @click="getList">查询</el-button>
            </el-form-item>
        </el-form> -->
        <el-table :data="tableData" style="width:100%;">
            <el-table-column label="设备名称" prop="ipName"></el-table-column>
            <el-table-column label="设备名称" prop="devName"></el-table-column>
            <el-table-column label="设备类型" prop="devType">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.devType == 1 ? '公区设备' :
                        scope.row.devType == 2 ? '室内设备' : ''}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div>
                        <el-button type="danger" size="small" @click="delMapping(scope.row.id)">删除</el-button>
                        <el-button type="warning" size="small"
                            @click="upOrAdd=2,updateForm=scope.row,dialogTableVisible=true">修改</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <paging @changePage='handleCurrentPage' :get-total='total'></paging>

        <el-dialog :title="upOrAdd==1?'新增':'修改'" :visible.sync="dialogTableVisible">
            <el-form ref="form" :model="updateForm" label-width="100px" :rules="rules">
                <el-form-item label="设备地址" prop="ipName">
                    <el-input v-model="updateForm.ipName"></el-input>
                </el-form-item>
                <el-form-item label="设备名称" prop="devName">
                    <el-input v-model="updateForm.devName"></el-input>
                </el-form-item>
                <el-form-item label="设备类型" prop="devType">
                    <el-select v-model="updateForm.devType" placeholder="请选择类型">
                        <el-option label="公区报警" value="1"></el-option>
                        <el-option label="室内报警" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateOrAdd">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import paging from '../../components/paging.vue';
    import {
        getDeviceMap,
        delDeviceMap,
        addDeviceMap,
        updateDeviceMap,
    } from '../../url/api';
    export default {
        data() {
            return {
                upOrAdd: 0, // 1新增 2修改
                dialogTableVisible: false,
                tableData: [],
                formSearch: {
                    current: 1,
                    size: 10,
                    devType: "1",
                },
                updateForm: {
                    ipName: '',
                    devName: '',
                    devType: '1',
                },
                total: 0,
                rules: {
                    ipName: [
                        {
                            required: true,
                            message: '请输入IP名称',
                            trigger: 'blur',
                        },
                    ],
                    devName: [
                        {
                            required: true,
                            message: '请输入设备名称',
                            trigger: 'blur',
                        },
                    ],
                    devType: [
                        {
                            required: true,
                            message: '请选择设备类型',
                            trigger: 'blur',
                        },
                    ],
                },
            };
        },
        created() {

            this.Bus.$on('comsendTableData', (data) => {
                console.log('~~~~', data);
                this.formSearch = data.formSearch;
                // this.total = data.total
                this.getlist();
            })
        },
        methods: {
            cleanObj() {
                this.$nextTick(() => {
                    this.updateForm = {
                        ipName: '',
                        devName: '',
                        devType: 1,
                    }
                })
            },
            /* 新增or修改  1新增 2修改 */
            updateOrAdd() {
                // this.updateForm.devType = +this.updateForm.devType;
                if (this.upOrAdd == 1) {
                    addDeviceMap(this.updateForm).then((res) => {
                        if (res.data.ok) {
                            this.$message.success('新增成功');
                            this.getList();
                            this.dialogTableVisible = false;
                        }
                    });
                }
                if (this.upOrAdd == 2) {
                    updateDeviceMap(this.updateForm).then((res) => {
                        if (res.data.ok) {
                            this.$message.success('修改成功');
                            this.getList();
                            this.dialogTableVisible = false;
                        }
                    });
                }
                this.cleanObj();
            },
            delMapping(id) {
                delDeviceMap(id).then((res) => {
                    if (res.data.ok) {
                        this.$message.success('删除成功');
                        this.getList();
                    }
                });
            },
            getList() {
                getDeviceMap(this.formSearch).then((res) => {
                    if (res.data.ok) {
                        this.tableData = res.data.data;
                    } else {
                        this.tableData = [];
                    }
                });
            },
            handleCurrentPage(val) {
                this.formSearch.current = val;
                this.getList();
            },
        },
        mounted() {
            this.getList();
        },
        components: {
            paging,
        },
    };
</script>

<style scoped lang='scss'>
    .sectionType {
        background: #fff;
        width: 100%;
    }
</style>
